<template>
	<div id="nav-box">
		<div class="nav-bar">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/front/home">前台商城</a> </el-breadcrumb-item>
				<el-breadcrumb-item><a href="/commodity-details">商品详情</a></el-breadcrumb-item>
			</el-breadcrumb>
				<el-autocomplete
				v-model="state"
				:fetch-suggestions="querySearchAsync"
				placeholder="请输入内容"
				@select="handleSelect"
				
				@click="goGoods"
				
				>
				<el-button  slot="append" icon="el-icon-search">
				</el-button>
			</el-autocomplete>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2NavMenu',

	data() {
		return {
			restaurants: [],
			state: '',
			timeout:  null
		};
	},

	mounted() {
		this.restaurants = this.loadAll();
	},

	methods: {
		// goGoods(){
		// 	this.$router.push(
    //     {
    //       path:"/Details/details",
    //       query:{
    //         id: id
    //       }
    //     }
    //   );
		// },
			loadAll() {
        return [
          { "value": "Java从入门到精通"},
          { "value": "Vue.js 3.0企业级管理后台开发实战：基于Element Plus"},
          { "value": "Java从入门到精通(第6六版)"},
          { "value": "JavaWeb项目开发实战入门"},
          { "value": "深入理解Java虚拟机" },
          { "value": "深入理解Java虚拟机"},
          { "value": "零基础学Java" },
          { "value": "Java四大名著"},
        ];
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 2000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
	},
};
</script>

<style lang="less" >
	#nav-box{
		width: 100%;
		height: 120px;
		// background: brown;
		.nav-bar{
			width: 1200px;
			height: 100px;
			// background-color: aqua;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgb(10, 156, 214);

			img{
				width: 132px;
			}
		}
			.el-input__inner{
			height: 40px;
			width: 400px;
			font-size: 15px;
			
		}
		.el-input-group__append{
			padding: 0 30px;
			width: 60px;
			height: 40px;
		}
		.el-input--mini{
			width: 460px;
			margin-left: 200px;
		}
	}
	.el-breadcrumb{
		margin-left: 40px;
	}
</style>